<template>
  <view class="v-container">
    <!-- 顶部导航栏 -->
    <view class="v-nav-bar flex items-center justify-between px-4 py-3 border-b bg-white">
      <view class="v-nav-back" @click="goBack">
        <i class="fa fa-arrow-left text-gray-600"></i>
      </view>
      <view class="v-nav-title text-center font-bold">选择创建主题</view>
      <view class="w-8"></view>
    </view>

    <!-- 主题分类区域 - 改为动态渲染 -->
    <view class="v-category-container px-4 py-4">
      <view class="v-category-tabs grid grid-cols-4 gap-2">
        <!-- 固定的"全部主题"分类 -->
        <button class="v-category-tab" :class="{ 'active': selectedCategory === 'all' }" @click="selectCategory('all')">
          <view class="flex flex-col items-center">
            <i class="fa fa-th-large mb-1"></i>
            <text class="text-xs">全部主题</text>
          </view>
        </button>
        <!-- 动态渲染的分类 -->
        <button 
          v-for="category in dynamicCategories" 
          :key="category.id" 
          class="v-category-tab" 
          :class="{ 'active': selectedCategory === category.id }"
          @click="selectCategory(category.id)"
        >
          <view class="flex flex-col items-center">
            <i :class="category.iconClass" class="mb-1"></i>
            <text class="text-xs">{{ category.name }}</text>
          </view>
        </button>
      </view>
    </view>

    <!-- 自定义活动按钮 -->
    <view class="v-custom-activity-container px-4 py-2">
      <button class="v-custom-activity-btn" @click="createCustomVote">+ 创建自定义投票</button>
    </view>

    <!-- 模板列表区域 - 添加了margin-top -->
    <view class="v-template-container px-4 py-6 mt-6 bg-white">
      <view class="v-template-grid grid grid-cols-3 gap-4">
        <view v-for="(template, index) in templates" :key="index" class="v-template-card rounded-xl overflow-hidden shadow-sm" :class="`bg-${template.colorClass}`">
          <view class="v-template-header h-40"></view>
          <view class="v-template-footer p-4 bg-white">
            <button class="v-template-btn w-full">立即使用</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 存储当前选中的主题分类
const selectedCategory = ref('all');

// 模拟从数据库获取动态分类数据
const dynamicCategories = ref([]);

// 模板数据
const templates = ref([
  { colorClass: 'red-500' },
  { colorClass: 'blue-500' },
  { colorClass: 'green-500' },
  { colorClass: 'orange-500' },
  { colorClass: 'purple-500' },
  { colorClass: 'red-600' },
  { colorClass: 'red-500' },
  { colorClass: 'blue-500' },
  { colorClass: 'green-500' },
  { colorClass: 'orange-500' },
  { colorClass: 'purple-500' },
  { colorClass: 'red-600' },
]);

// 模拟从API获取分类数据的函数
const fetchCategories = () => {
  // 实际项目中这里应该是调用API获取数据
  // 这里使用模拟数据
  return [
    { 
      id: 'general', 
      name: '通用主题', 
      iconClass: 'fa fa-paint-brush' 
    },
    { 
      id: 'competition', 
      name: '赛事评比', 
      iconClass: 'fa fa-trophy' 
    },
    { 
      id: 'festival', 
      name: '节日节气', 
      iconClass: 'fa fa-calendar' 
    },
    { 
      id: 'children', 
      name: '儿童萌娃', 
      iconClass: 'fa fa-child' 
    },
    { 
      id: 'excellent', 
      name: '优秀评选', 
      iconClass: 'fa fa-star' 
    },
    { 
      id: 'patriotic', 
      name: '爱党爱国', 
      iconClass: 'fa fa-flag' 
    },
    { 
      id: 'new', 
      name: '最新上架', 
      iconClass: 'fa fa-bolt' 
    }
  ];
};

// 主题分类选择
const selectCategory = (category) => {
  selectedCategory.value = category;
};

// 返回上一页
const goBack = () => {
  window.history.back();
};

// 点击创建自定义投票按钮
const createCustomVote = () => {
   uni.navigateTo({ url:'/pages/createVote/newVote' });
};

// 组件挂载时获取分类数据
onMounted(() => {
  // 模拟API请求延迟
  setTimeout(() => {
    dynamicCategories.value = fetchCategories();
  }, 300);
});

// 示例：如何更新分类数据（通常由父组件或API触发）
const updateCategories = (newCategories) => {
  dynamicCategories.value = newCategories;
};
</script>

<style scoped>
/* 基础容器 */
.v-container {
  min-height: 100vh;
  background-color: #f7f8fa;
}

/* 导航栏 */
.v-nav-bar {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.v-nav-back {
  padding: 8px;
  cursor: pointer;
}

.v-nav-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

/* 分类区域 */
.v-category-container {
  background-color: #fff;
  margin-bottom: 16px;
}

.v-category-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.v-category-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border-radius: 8px;
  background-color: #f5f5f5;
  color: #333;
  transition: all 0.3s ease;
}

.v-category-tab.active {
  background-color: #3498DB;
  color: #fff;
}

.v-category-tab i {
  font-size: 18px;
  margin-bottom: 4px;
}

/* 自定义活动按钮 */
.v-custom-activity-container {
  padding: 0 16px;
}

.v-custom-activity-btn {
  width: 100%;
  padding: 12px 0;
  background-color: #2ECC71;
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

/* 模板区域 - 添加了margin-top */
.v-template-container {
  margin-top: 24px;
}

.v-template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.v-template-card {
  transition: transform 0.3s ease;
}

.v-template-card:hover {
  transform: translateY(-4px);
}

.v-template-header {
  height: 100px;
}

.v-template-footer {
  padding: 12px;
}

.v-template-btn {
  padding: 8px 0;
  background-color: #3498DB;
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
}

/* 颜色类 */
.bg-red-500 { background-color: #FF5733; }
.bg-blue-500 { background-color: #3498DB; }
.bg-green-500 { background-color: #2ECC71; }
.bg-orange-500 { background-color: #F39C12; }
.bg-purple-500 { background-color: #8E44AD; }
.bg-red-600 { background-color: #E74C3C; }
</style>